<template>
  <view class="container">
    <view class="success-content">
      <image class="success-icon" src="/static/mine/ywclb.png" mode=""></image>
      <view class="success-title">反馈已提交</view>
      <view class="success-message">即将跳转到我的任务（已完成）</view>
      <view class="countdown">将在 <text class="countdown-number">{{ seconds }}</text> 秒后跳转</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const seconds = ref(3)
let timer = null

const redirectToMyTask = () => {
  // 带来源标记跳转，便于在我的任务页做单次返回到“我的”页
  uni.redirectTo({ url: '/pages/mine/myTask?tab=1&from=feedbackSuccess' })
}

onLoad((opts) => {
  const s = parseInt(opts?.delay)
  if (!isNaN(s) && s > 0) seconds.value = s
})

onMounted(() => {
  timer = setInterval(() => {
    if (seconds.value <= 1) {
      clearInterval(timer)
      redirectToMyTask()
    } else {
      seconds.value -= 1
    }
  }, 1000)
})

onUnmounted(() => { if (timer) clearInterval(timer) })
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #F2F3F5;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
}

.success-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.success-title {
  font-size: 48rpx;
  font-weight: 600;
  color: #00bd86;
  margin-bottom: 20rpx;
}

.success-message {
  font-size: 32rpx;
  color: #7C8288;
  margin-bottom: 60rpx;
}

.countdown {
  font-size: 28rpx;
  color: #B8B8B8;
}

.countdown-number {
  color: #00bd86;
  font-weight: 600;
  font-size: 36rpx;
}
</style>